<template>
    <div>
      <el-button type="primary" @click="handleClass">换类名</el-button>
      <el-button type="primary" @click="add">Add</el-button>
    </div>
    <div>
      <div class="container">
        <transition-group name="fade" class="transition-group">
          <Cards v-for="(item,index) in cardsList" :key="item.id" @click="showNumber(item,index)">
            <template #default>
              <p class="text">{{ item.show }}</p>
            </template>
          </Cards>
        </transition-group>
      </div>
      <el-dialog v-model="dialogVisible" title="Tips" width="30%">
        <span>{{showInfo!.show}}</span>
        <el-button type="primary" @click="add2">+1</el-button>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="save">
              Confirm
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
</template>
    
<script setup lang="ts">
  import Cards from './components/playing-cards.vue'
  import { computed, ref } from 'vue'
  import { useStore } from 'vuex'
  import type { MyObj } from './types';
  const store = useStore()
  
  const cardsList = computed(() => store.state.arr)
  const dialogVisible = ref(false)
  const showInfo = ref<MyObj>()
  const handleClass = () => {
    let res = shuffleArr(cardsList.value)
    store.commit('setStateArray', res)
    console.log(cardsList.value, shuffleArr(cardsList.value))
  }
  const shuffleArr = (arr:MyObj[]) => {
    const shuffled = [...arr]
    for (let i = shuffled.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1))
      ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
    }
  
    console.log('arr', shuffled)
    return shuffled
  }
  const add = () => {
    store.commit('setStateArray', [
      ...store.state.arr,
      { show: (cardsList.value.length + 1).toString(), number: cardsList.value.length + 1 }
    ])
  }
  const showNumber = (item:MyObj,index:number) => {
    showInfo.value = {...item,index:index}
    console.log(showInfo.value)
    dialogVisible.value = true
  }
  const add2 = ()=>{
    showInfo.value!.number++
    showInfo.value!.show = showInfo.value!.number.toString()
  }
  const save = ()=>{
    cardsList.value[showInfo.value!.index] = showInfo.value
    delete cardsList.value[showInfo.value!.index].index
    store.commit('setStateArray', cardsList.value)
    dialogVisible.value = false
  }
  </script>
    
<style scoped>
    #app{
      background-color: #cccccc00;
    }
    .text {
      text-align: center;
      line-height: 50%;
      font-size: 80px;
      font: Georgia, Times New Roman, serif;
    }
    .container {
      display: flex;
      position: relative;
      width: 100%;
      height: 300px;
      /* background-color: rgb(90, 168, 168); */
    }
    .transition-group {
      position: relative;
      padding: 0;
    }
    .fade-move,
    .fade-enter-active,
    .fade-leave-active {
      transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    }
    
    .fade-enter-from,
    .fade-leave-to {
      opacity: 0;
      transform: scaleY(0.01) translate(30px, 0);
    }
    
    .fade-leave-active {
      position: absolute;
    }
    .transition-group-enter-active,
    .transition-group-leave-active {
      transition: all 1s;
    }
    
    .transition-group-enter-from,
    .transition-group-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }
</style>
    